<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background-color: red;
				
			}
		</style>
	</head>
	<body>
		<div>
			<button  id="btn">开始运动</button>
			<div id="box"></div>
		</div>
		<script>
				window.onload = function(){
					ddd('btn','box',100,800);
					};
					
					 function ddd(btnId,boxId,l,end){
						 var btn = document.getElementById(btnId);
						 var box = document.getElementById(boxId);
						var timer = null, begin = 0;
						
						btn.onclick = function(){
							clearInterval(timer);
							
				 timer = setInterval( function(){
					  begin += l;
					  
					  if(begin >= end){
						  begin = end;
						  clearInterval(timer);  }
						
						  box.style.marginLeft = begin +'px';
						  
			},100);
		 } 
		}
		
				
				
				
			</script>
	</body>

</html>
